<template>
  <div class="channel-edit">
    <van-cell title="我的频道">
      <van-button type="danger" size="small" round plain @click="isEdit = !isEdit">{{isEdit?'完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="6">
      <van-grid-item v-for="(value,index) in channels" :key="index" :text="value.name" :class="{active: index === active}" @click="handleClickMyChannel(index)">
        <van-icon name="close" slot="icon" v-if="isEdit"/>
      </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" />
    <van-grid :gutter="6">
      <van-grid-item @click="handleAddMyChannel(value)" v-for="(value,index) in recommendChannel" :key="index" icon="plus" :text="value.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, updateChannels } from '@/api/channels'
export default {
  name: 'ChannelEdit',
  props: {
    // 我的频道
    channels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 所有频道
      allChannels: [],
      isEdit: false // 编辑状态
    }
  },
  computed: {
    recommendChannel () {
      // 从所有频道里面筛选出没有在我的频道里面的数据
      return this.allChannels.filter(t => {
        const f = this.channels.find(m => m.id === t.id)
        // 如果找到了,f不会null,如果没找到f为null
        // return f? false : true
        return !f
      })
    }
  },
  components: {},
  async created () {
    const res = await getAllChannels()
    this.allChannels = res.data.data.channels
  },
  mounted () {},
  methods: {
    async handleAddMyChannel (item) {
      // 方式1-通过子传父,通过父组件
      // this.$emit('add', item)
      // 方式2-直接操作父组件传过数据
      this.channels.push(item)
    },
    async handleClickMyChannel (index) {
      if (this.isEdit) {
        // 编辑模式,删除
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.channels.splice(index, 1)
      } else {
        // 切换
        this.$emit('update-active', index)
      }
    }
  },
  watch: {
    async channels (val) {
      if (this.$store.state.token) {
        // 如果登录,发请求
        await updateChannels({ channels: this.channels })
      } else {
        // 如果没有登录,存储本地
        localStorage.toutiao_channels = JSON.stringify(this.channels)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding-top: 80px;
}

.van-cell__title {
  font-size: 32px;
  color: #333333;
}
.van-button--danger {
  width: 104px;
  height: 48px;
}
/deep/ .active{
  .van-grid-item__text{
    color:red;
  }
}
// .van-grid-item{
//     overflow: hidden;
//     white-space: nowrap;
// }
/deep/ .van-grid-item__content {
  .van-icon-plus {
    font-size: 28px;
    margin-right: 6px;
  }
  .van-grid-item__icon-wrapper{
        position: unset;
  }
  .van-icon-close {
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 32px;
  }
  .van-grid-item__text {
    margin-top: 0 !important;
  }
  background-color: #f4f5f6;
  display: flex;
  flex-direction: row;
}
</style>
